<html>
<head>
    <title>SuperMap iClient for JavaScript 9D</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./libs/css/adminLTE.min.css">
    <link rel="stylesheet" href="./libs/css/skin-blue.min.css">
    <link rel="stylesheet" href="./libs/css/blue.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" >
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css">
    <link rel='stylesheet' href='http://cdn.bootcss.com/mapbox-gl/0.36.0/mapbox-gl.css'/>
    <link rel="stylesheet" href="libs/css/widgets.css">
    <link rel="stylesheet" href="libs/css/default.css">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="libs/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">

<!--头部1-->
<header class="header-wrapper main-header">

    <nav class="navbar navbar-static-top">

        <div class="nav-header">

        </div>
    </nav>
</header>
<script>
    $('.nav-header').load('./header.html');
</script>

<!--头部2-->
<header class="header-home">
    <div class="container">
        <div class="row">
            <!-- 左边的图片 -->
            <!-- 在class中加入hidden-xs可以在小屏幕时将图片隐藏-->
            <div class="col-md-4 col-md-offset-1 col-sm-4 animated fadeIn banner">
                <img src="./img/banner.png" alt="header-img" class="img-responsive center-block"/>
            </div>
            <!-- 右边的文字 -->
            <div class="header-description animated fadeIn">
                <div class="col-md-5 col-md-offset-1 col-sm-6 col-sm-offset-2" id="header2-text">
                    <h3 class="tc pt50">开放式 GIS 客户端开发包</h3>
                </div>
                <!-- 右边的链接按钮 -->
                <div class="row" style="margin-bottom: 20px">
                    <div class="col-md-2 col-md-offset-1 col-sm-6 col-xs-6" id="button_zip">
                        <button type="button" class="radiusBtn">
                            <img src="./img/packageIcon.png" style="height: 20px;width: 20px"><a href="downloads/iclient9.zip">&nbsp;iclient9.zip</a>
                        </button>
                    </div>
                    <div class="col-md-2 col-md-offset-1 col-sm-6 col-xs-6" id="button_sourceCode">
                        <button type="button" class="radiusBtn">
                            <img src="./img/sourcecodeIcon.png" style="height: 20px;width: 20px"><a href="https://git.oschina.net/isupermap/iClient9" target="_blank">&nbsp;source code</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container animated fadeInUpBig">
    <div class="row">
        <div class="col-md-1" role="main"></div>
        <div class="col-md-10" role="main">
            <div class="bs-docs-section">
                <p class="lead" style="font-size: 20px;text-align: left;color:#505666;margin-top: 40px ">
                    SuperMap iClient for JavaScript 9D是空间信息和服务的可视化交互开发平台，是SuperMap服务器和在线GIS平台系列产品的统一JS客户端。支持多源数据地图，支持多终端，跨浏览器，通过本产品可快速实现浏览器上美观、流畅的地图呈现。</p>

                <h2 id="quick-start">快速入门</h2>
                <!--leaflet-->
                <div>
                    <h3 style="margin-top: 34px;font-size: 24px;color: #404040;letter-spacing: -0.16px;">Leaflet</h3>
                    <div class="map" id="leafletMap"></div>
                    <p style="margin-top: 18px">将 iSevrer 发布的地图加载至 Leaflet 的 map 中</p>
                    <pre class="javascript"><code>var map = L.map(&#39;map&#39;);
L.supermap.tiledMapLayer(&quot;http://localhost:8090/iserver/services/map/rest/maps/China&quot;).addTo(map);</code><a href="../examples/leaflet/editor.html#01_tiledMapLayer3857" style="font-size: 10px;float:right">查看源码&nbsp;&raquo;</a></pre>
                </div>
                <!--OpenLayers-->
                <div>
                    <h3 style="margin-top: 34px;font-size: 24px;color: #404040;letter-spacing: -0.16px;">OpenLayers</h3>
                    <div class="map" id="olMap"></div>
                    <p style="margin-top: 19px">将 iSevrer 发布的地图加载至 OpenLayers 的 map 中

                    </p>
                    <pre class="javascript"><code>var map = new ol.Map({
    target: &#39;map&#39;,
    layers: [new ol.layer.Tile({
        source: new ol.supermap.TileSuperMapRest({
            url: &quot;http://localhost:8090/iserver/services/map/rest/maps/World&quot;
        }),
    })]
});</code><a href="../examples/openlayers/editor.html#01_tiledMapLayer4326" style="font-size: 10px;float:right">查看源码&nbsp;&raquo;</a></pre>
                </div>
                <!--Mapbox GL JS-->
                <div>
                    <h3 style="margin-top: 34px;font-size: 24px;color: #404040;letter-spacing: -0.16px;">Mapbox GL JS</h3>
                    <div class="map" id="mapboxMap"></div>
                    <p style="margin-top: 19px">将 iSevrer 发布的地图加载至 Mapbox GL JS 的 map 中
                    </p>
                    <pre class="javascript"><code>var map = new mapboxgl.Map({
        container: "map",
        style: {
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": ['http://localhost:8090/iserver/services/map/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
            }]
        },
});</code><a href="../examples/mapboxgl/editor.html#01_tiledMapLayer" style="font-size: 10px;float:right">查看源码&nbsp;&raquo;</a></pre>
                </div>
                <!--iClient3D-->
                <div>
                    <h3 style="margin-top: 34px;font-size: 24px;color: #404040;letter-spacing: -0.16px;">iClient3D</h3>
                    <div class="map" id="iC3DMap"></div>
                    <p style="margin-top: 19px">
                    </p>

                    <pre class="javascript"><code>var viewer = new Cesium.Viewer('cesiumContainer');</code><a href="../examples/3dwebgl/editor.html#01_3DMap" style="font-size: 10px;float:right;">查看源码&nbsp;&raquo;</a></pre>
                </div>
                <!--新特性-->
                <div class="new-attributes">
                    <h2>新特性</h2>
                    <div class="row">
                        <div class="col-md-12">

                            <div class="box  box-solid collapsed-box">
                                <div class="box-header with-border">
                                    <h4 class="box-title">全新的站点</h4>

                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="box-body">
                                    <ul>
                                        <li>新的站点和页面设计</li>
                                        <li>示例在线编辑功能</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="box  box-solid collapsed-box">
                                <div class="box-header with-border">
                                    <h4 class="box-title">支持iServer服务</h4>

                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="box-body">
                                    <ul>
                                        <li>iServer地图服务</li>
                                        <li>iServer数据服务</li>
                                        <li>iServer网络分析服务</li>
                                        <li>iServer空间分析服务</li>
                                        <li>iServer交通换乘服务</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="box  box-solid collapsed-box">
                                <div class="box-header with-border">
                                    <h4 class="box-title"> 支持iPortal</h4>

                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>

                                </div>

                                <div class="box-body">
                                    <ul>
                                        <li>iPortal地图</li>
                                    </ul>
                                </div>

                            </div>
                            <!-- /.box -->
                        </div>

                        <div class="col-md-12">
                            <div class="box  box-solid collapsed-box">
                                <div class="box-header with-border">
                                    <h4 class="box-title">支持online</h4>
                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="box-body">
                                    <ul>
                                        <li>online地图</li>
                                    </ul>
                                </div>

                            </div>
                            <!-- /.box -->
                        </div>

                        <div class="col-md-12">
                            <div class="box  box-solid collapsed-box">
                                <div class="box-header with-border">
                                    <h4 class="box-title">支持OGC服务</h4>
                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="box-body">
                                    <ul>
                                        <li>WMTS、WMS图层</li>
                                    </ul>
                                </div>

                            </div>
                            <!-- /.box -->
                        </div>

                        <div class="col-md-12">
                            <div class="box  box-solid collapsed-box">
                                <div class="box-header with-border">
                                    <h4 class="box-title"> 支持第三方地图</h4>

                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="box-body">
                                    <ul>
                                        <li>OpenLayers支持百度地图</li>
                                        <li>Leaflet支持百度地图、天地图、超图云地图</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="box  box-solid collapsed-box">
                                <div class="box-header with-border">
                                    <h4 class="box-title">数据可视化</h4>
                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="box-body">
                                    <ul>
                                        <li>支持访问iServer矢量瓦片</li>
                                        <li>支持OpenLayers、Leaflet热力图</li>
                                        <li>支持OpenLayers、Leaflet聚点图</li>
                                        <li>支持OpenLayers、Leaflet动画要素图</li>
                                        <li>支持OpenLayers(Canvas、webGL)、Leaflet(Canvas)高效率点图层</li>
                                        <li>OpenLayers支持Echarts折线图、柱状图、散点图、饼图</li>
                                        <li>Leaflet支持Echarts折线图、柱状图、散点图、饼图、散点地图、迁徙图、热力图、线路图、线特效图</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="iclient-footer">
        <div class="container">
            <div class="iclient-copyright" id="iclient-footer">版权所有 © 2000-2017 北京超图软件股份有限公司 京ICP备11032883号-8 京公网安备11010502008721 甲测资字11002074
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./libs/js/app.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
<script type="text/javascript" src="../dist/iclient9-openlayers.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="../dist/iclient9-leaflet.js"></script>
<script type="text/javascript" src='http://cdn.bootcss.com/mapbox-gl/0.36.0/mapbox-gl.js'></script>
<script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.min.js"></script>
<script type="text/javascript" src="./libs/Cesium/Cesium.js"></script>
<script type="text/javascript" src="./libs/Cesium/Workers/zlib.min.js"></script>
<script type="text/javascript">
    /*Leaflet Map*/
    var lMap = L.map('leafletMap', {
        center: [39.89, 116.38],
        maxZoom: 15,
        minZoom: 1,
        scrollWheelZoom: false,
        zoom: 10
    });
    L.supermap
            .tiledMapLayer("http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China")
            .addTo(lMap);

    /*OpenLayers Map*/
    var olMap = new ol.Map({
        target: 'olMap',
        interactions: ol.interaction.defaults({
            mouseWheelZoom: false
        }),
        view: new ol.View({
            center: [100.94, 35.49],
            zoom: 4,
            maxZoom: 10,
            minZoom: 0,
            projection: 'EPSG:4326'
        }),
        layers: [new ol.layer.Tile({
            source: new ol.supermap.TileSuperMapRest({
                url: "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World"
            }),
            projection: 'EPSG:4326'
        })]
    });

    /*Mapbox Map*/
    var mbMap = new mapboxgl.Map({
        container: 'mapboxMap',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": ['http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 1,
                "maxzoom": 15
            }]
        },
        center: [116.38, 39.89],
        zoom: 9.5,
        interactive: false,
        navigationControl: false
    });
    mbMap.dragPan.enable();
    mbMap.addControl(new mapboxgl.AttributionControl({compact: true}), 'bottom-right');
    mbMap.addControl(new mapboxgl.NavigationControl(), 'top-left');

    /*iClient3D*/
    if (Cesium) {
        var viewer = new Cesium.Viewer('iC3DMap');
    }

</script>
</body>
</html>